<template>
	<view>
		<!-- <scroll-view ref="myScrollView" scroll-with-animation="true" :class="(showPop1==true||showPop2==true) ?'vh100':'' " :scroll-y="true"> -->
		<view class="content acenter position_re vh100 pagebg">

			<image class="theorybg" v-show="showType==1" src="/static/images/website_theorybg.svg"></image>
			<view :class="showType==1 ?'pagetopview':'pagetopview2' " style="">
				<image class="webtoplogo"
					:src="showType==1 ?'/static/images/website_logo.svg':'/static/images/website_logo_white.svg'">
				</image>
				<view class="pageRightView acenter">
					<view class="topview1" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
						<text :class="'home_title2 ' + (showType==1 ? 'black_000' : 'white_font')">未来慧学系统</text>
						<view :class="'topline '  + (showType==1 ? '' : 'visibi_hide')"></view>
					</view>
					<view class="topview2" @mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2">
						<text :class="'home_title2 ' + (showType==1 ? 'black_000' : 'white_font')">关于我们</text>
						<view :class="'topline2 '  + (showType==2 ? '' : 'visibi_hide')"></view>
					</view>
					<view class="topview2" @click="jumpInfo">
						<text :class="'home_title2 ' + (showType==1 ? 'black_000' : 'white_font')">新闻中心</text>
						<view :class="'topline2 '  + (showType==4 ? '' : 'visibi_hide')"></view>
					</view>
					<view class="topview3" @click="jumpTaskHome">
						<image class="jumphome" src="/static/images/website_jumphome.svg"></image>
					</view>
				</view>
			</view>
			<view class="flex_column acenter" v-show="showType==1">
				<view class="flex_row" v-show="showType==1">

					<view class="flex_column mr_125">
						<image class="toplogo2" src="/static/images/website_toplogo.svg"></image>
						<!-- ml_218 -->
						<image class="theorytitle mt_98 ml_50" src="/static/images/website_theory_title.svg">
						</image>
						<!-- 	ml_212 -->
						<image class="theoryimg1 mt_58 ml_44" src="/static/images/website_theory1.svg"></image>
						<!-- ml_212 -->
						<image class="theoryimg1 mt_26 ml_44" src="/static/images/website_theory2.svg"></image>
						<!-- ml_212 -->
						<image class="theoryimg3 mt_26 ml_44" src="/static/images/website_theory3.svg"></image>

					</view>

					<view class="flex_column ml_125">
						<image class="toplogo2 visibi_hide" src="/static/images/website_toplogo.svg"></image>
						<image class="theoryimg mt_35 " src="/static/images/website_theoryimg.svg"></image>

					</view>
				</view>

				<image class="theoryimg4" src="/static/images/website_theoryimg2.svg"></image>

				<image class="theoryline mt_94" src="/static/images/website_line.svg"></image>
				<!--全阅读学习-->
				<view class="flex_between2 mt_117 vwid2133" v-show="showType==1">
					<view class="flex_column ml_31">
						<image class="readtitle" src="/static/images/website_readtitle.svg"></image>
						<image class="readimg" src="/static/images/website_readimg.svg"></image>
					</view>
					<view class="flex_column acenter " style="margin-right: 143rpx;">
						<image class="readtitle2 mt_35" src="/static/images/website_readtitle2.svg"></image>
						<image class="readimg2" src="/static/images/website_readimg2.svg"></image>
					</view>
				</view>
				<image class="theoryline mt_128" src="/static/images/website_line.svg"></image>
				<!--3大技术底层-->
				<view class="flex_column acenter mt_60 vwid2133" v-show="showType==1">
					<view class="flex_row vwid2133">
						<image class="techtitle" src="/static/images/website_techtitle.svg"></image>
					</view>
					<image class="techimg" src="/static/images/website_techimg1.svg"></image>
					<image class="techimg2" src="/static/images/website_techimg2.svg"></image>
					<image class="techimg3" src="/static/images/website_techimg3.svg"></image>
				</view>

				<!--6大AI应用-->
				<view class="flex_column acenter mt_50 vwid2133" v-show="showType==1">
					<view class="flex_row vwid2133">
						<image class="aiitle" src="/static/images/website_aititle.svg"></image>
					</view>
					<image class="aiimg" src="/static/images/website_aiimg.svg"></image>
				</view>
				<!--5大维度提升-->
				<view class="flex_column acenter mt_180 vwid2133" v-show="showType==1">
					<view class="flex_row vwid2133">
						<image class="elevateitle" src="/static/images/website_elevatetitle.svg"></image>
					</view>
					<image class="elevateimg" src="/static/images/website_elevateimg.svg"></image>
				</view>
				<view class="flex_column" style="height: 500rpx;"></view>
			</view>
			<!--关于我们-->
			<view class="aboutusview" id="aboutusview" v-show="showType==2"
				style="width: 100vw;background-color: #2C2C2C;">

				<image class="cotacttopimg" id="item1" mode="widthFix" src="/static/images/website_aboutustopbg.svg">
				</image>
				<view class="flex_row white_bg">

					<image class="aboutusimg1" id="item2" mode="widthFix" src="/static/images/website_aboutusimg1.svg">
				</view>

				</image>
				<image class="aboutusimg1" id="item3" mode="widthFix" src="/static/images/website_aboutusimg2.svg">
				</image>
				<image class="item4" id="item4" mode="widthFix" src="/static/images/website_aboutusimg3.svg"></image>
				<image class="item5" id="item5" mode="widthFix" src="/static/images/website_aboutusimg4.svg"></image>
				<image class="item6" id="item6" mode="widthFix" src="/static/images/website_aboutusimg5.svg"></image>
				<image class="item7" id="item7"></image>
			</view>
			<!--联系我们-->
			<view class="flex_column white_bg" v-show="showType==3" style="width: 100vw;">
				<image class="cotacttopimg" mode="widthFix" src="/static/images/website_aboutustopbg.svg"></image>
				<view class="flex_column position_re acenter fbox-jcenter" style="width: 100vw;">
					<image class="aboutusimg1 " mode="widthFix" src="/static/images/website_contactbg.svg"></image>
					<view class="flex_column position_ab">
						<image class="cotactusimg " mode="widthFix" src="/static/images/website_contactimg1.svg">
						</image>
						<image class="cotactusimg2 mt_35" mode="widthFix" src="/static/images/website_contactimg2.svg">
						</image>
					</view>
					<text class="aboutustv">深圳市博睿教育科技有限公司</text>
				</view>
			</view>

			<!--新闻中心-->
			<view class="flex_column white_bg" v-show="showType==4" style="width: 100vw;">
				<image class="cotacttopimg" mode="widthFix" src="/static/images/website_infotopbg.png"></image>
				<view class="flex_column position_re infobg" style="width: 100vw; padding-bottom: 100rpx;">
					<view class="fbox fbox_wrap mt_50  ml_306" style="margin-right: 306rpx;" v-show="newType==1">
						<block v-for="(item, index) in newsList" :key="index">
							<view class="flex_column newsitem  mt_50 mlr_25" @click="selectNews" :data-index="index">
								<image class="newsimg" :src="item.pic"></image>

								<text class="newstitle comment_inner">{{item.title}}</text>

								<text class="newsdesc comment_inner">{{item.show_content}}</text>
							</view>
						</block>
					</view>
					<view class="flex_column acenter mt_50  " v-if="newType==2">
						<view class="flex_column vwid100">
							<view class="interfacebackview " @click="backNewsList">
								<text class="interfacebacktv">返回</text>
							</view>
						</view>
						<text class="newstitle ">{{newsTitle}}</text>
						<view class="flex_row mt_50 box-border" >
							<!-- wxParse -->
							<u-parse className="" :content="newsContent" @preview="preview"
								@navigate="navigate"></u-parse>
						</view>

					</view>

				</view>
			</view>
		</view>
		<!-- 	</scroll-view> -->
		<view class="modal-mask" v-show="showPop1" @touchmove.prevent="preventTouchMove"
			@mouseenter.stop="pop1MouseEnter" @mouseleave.stop="pop1MouseLeave">
			<!--弹窗出现后也能切换弹窗-->
			<view class="pagetopview3">
				<image class="webtoplogo visibi_hide" src="/static/images/website_logo.svg"></image>
				<view class="pageRightView acenter mr_29">
					<view class="topview1" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
						<text class="home_title2  visibi_hide">未来慧学系统</text>
					</view>
					<view class="topview2" @mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2">
						<text class="home_title2 visibi_hide">关于我们</text>
					</view>
					<view class="topview2">
						<text class='home_title2 visibi_hide'>新闻中心</text>
					</view>
					<view class="topview3">
						<image class="jumphome visibi_hide" src="/static/images/website_jumphome.svg"></image>
					</view>
				</view>
			</view>
			<view class="flex_column popcontent1">
				<image class="popbg1" src="/static/images/website_popbg1.svg"></image>
				<view class="popcontent1_item1view flex_row" @mouseenter="item1MouseEnter" @mouseleave="item1MouseLeave"
					@click="selectHome">
					<image class="popcontent1_item1" src="/static/images/website_popitem1.svg"></image>
					<view class="pop1icon" v-show="popcontent1_item1Icon"></view>
				</view>
				<view class="popcontent1_item2view">
					<image class="popcontent1_item2" src="/static/images/website_popitem2.svg"
						@mouseenter="item2MouseEnter" @mouseleave="item2MouseLeave" @click="jumpTaskHome"></image>
					<view class="pop1icon2" v-show="popcontent1_item2Icon"></view>
				</view>
			</view>

		</view>

		<view class="modal-mask" v-show="showPop2" @touchmove.stop.prevent="preventTouchMove">
			<!--弹窗出现后也能切换弹窗-->
			<view class="pagetopview3">
				<image class="webtoplogo visibi_hide" src="/static/images/website_logo.svg"></image>
				<view class="pageRightView acenter mr_29 ">
					<view class="topview1 " @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
						<text class="home_title2  visibi_hide">未来慧学系统</text>
					</view>
					<view class="topview2" @mouseenter="handleMouseEnter2" @mouseleave="handleMouseLeave2">
						<text class="home_title2 visibi_hide">关于我们</text>
					</view>
					<view class="topview2">
						<text class='home_title2 visibi_hide'>新闻中心</text>
					</view>
					<view class="topview3">
						<image class="jumphome visibi_hide" src="/static/images/website_jumphome.svg"></image>
					</view>
				</view>
			</view>
			<view class="flex_column popcontent2">
				<image class="popbg2" src="/static/images/website_popbg2.svg"></image>
				<view class="flex_row position_re ">
					<image class="popcontent2_item1" src="/static/images/website_pop2item1.svg" @click="selectAbout1"
						@mouseenter="pop2item1Enter" @mouseleave="pop2item1Leave">
					</image>
					<view class="pop2icon1" v-show="popcontent2_item1Icon"></view>
					<image class="popcontent2_item2" src="/static/images/website_pop2item2.svg" @click="selectAbout(7)"
						@mouseenter="pop2item2Enter" @mouseleave="pop2item2Leave">
					</image>
					<view class="pop2icon2" v-show="popcontent2_item2Icon"></view>
				</view>
				<view class="flex_row position_re">
					<image class="popcontent2_item3" src="/static/images/website_pop2item3.svg" @click="selectAbout(6)"
						@mouseenter="pop2item3Enter" @mouseleave="pop2item3Leave">
					</image>
					<view class="pop2icon3" v-show="popcontent2_item3Icon"></view>
					<image class="popcontent2_item4" src="/static/images/website_pop2item4.svg" @click="selectContact"
						@mouseenter="pop2item4Enter" @mouseleave="pop2item4Leave">
					</image>
					<view class="pop2icon4" v-show="popcontent2_item4Icon"></view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	const constantUtil = require('../../utils/constant.js');
	var consoleUtils = require('../../utils/consoleUtils.js');
	var networkUtil = require('../../network/network.js');
	const stringUtils = require('../../utils/stringUtils.js');
	export default {
		data() {
			return {
				showPop: false,
				showType: 1,
				showPop1: false, //第一个pop
				showPop2: false, //第二个pop
				popcontent1_item1Icon: false, //第一个pop 第一个item
				popcontent1_item2Icon: false, //第一个pop 第二个item
				popcontent2_item1Icon: false, //第二个pop 第一个item
				popcontent2_item2Icon: false, //第二个pop 第二个item
				popcontent2_item3Icon: false, //第二个pop 第三个item
				popcontent2_item4Icon: false, //第二个pop 第四个item
				newsList: [],
				newType: 1, //1 列表 2 详情
				newsTitle: "",
				newsContent: "",
				newsPic: "",
			}
		},

		onLoad() {
			this.getInfo()
		},
		methods: {
			jumpTaskHome() {
				uni.reLaunch({
					url: '/pages/newhome/newhome'
				})
			},
			preventTouchMove() {
				return true
			},
			selectHome() {
				this.showPop1 = false
				this.showType = 1
			},
			selectAbout1() {
				this.showPop2 = false
				if (this.showType != 2) {
					this.showType = 2
				}
			},
			selectAbout(targetId) {
				this.showPop2 = false
				if (this.showType != 2) {
					this.showType = 2
				}

				const query = uni.createSelectorQuery().in(this);
				query
					.select("#item4")
					.boundingClientRect((data) => {
						console.log("得到布局位置信息" + JSON.stringify(data));
						console.log("节点离页面顶部的距离为" + data.top);
					})
					.exec();
				let selectorID = ""
				if (targetId == 6) {
					selectorID = ".item6"
				} else {
					selectorID = ".item7"
				}
				// 使用scrollIntoView方法滚动到目标元素 item6 产品架构
				setTimeout(function() {
					uni.pageScrollTo({
						selector: selectorID,
						duration: 300
					})
				}, 500);


			},
			selectContact() {
				this.showPop2 = false
				if (this.showType != 3) {
					this.showType = 3
				}
			},
			jumpInfo() {
				if (this.showType != 4) {
					this.showType = 4
				}
			},
			pop1MouseEnter() {
				console.log('鼠标进入--pop1')
				// this.showPop1 = false

			},
			pop1MouseLeave() {
				console.log('鼠标离开--pop1')

			},
			handleMouseEnter() {
				if (!this.showPop1) {
					this.showPop1 = true
					this.showPop2 = false
					this.popcontent1_item1Icon = false
					this.popcontent1_item2Icon = false
					// console.log('鼠标进入')
				}

			},
			handleMouseLeave() {
				// this.showPop1 = false
				// console.log('鼠标离开')
			},
			handleMouseEnter2() {
				if (!this.showPop2) {
					this.showPop1 = false
					this.showPop2 = true
					this.popcontent2_item1Icon = false
					this.popcontent2_item2Icon = false
					this.popcontent2_item3Icon = false
					this.popcontent2_item4Icon = false
					// console.log('鼠标进入')
				}

			},
			handleMouseLeave2() {
				// this.showPop1 = false
				// console.log('鼠标离开')
			},

			item1MouseEnter() {
				// console.log('鼠标进入') pop1 item1
				if (!this.popcontent1_item1Icon) {
					this.popcontent1_item1Icon = true
				}
			},
			item1MouseLeave() {
				// console.log('鼠标离开') pop1 item1
				this.popcontent1_item1Icon = false
			},
			item2MouseEnter() {
				// console.log('鼠标进入') pop1 item2
				if (!this.popcontent1_item2Icon) {
					this.popcontent1_item2Icon = true
				}
			},
			item2MouseLeave() {
				// console.log('鼠标离开') pop1 item2
				this.popcontent1_item2Icon = false
			},
			pop2item1Enter() {
				// console.log('鼠标进入') pop1 item1
				if (!this.popcontent2_item1Icon) {
					this.popcontent2_item1Icon = true
				}
			},
			pop2item1Leave() {
				// console.log('鼠标离开') pop2 item1
				this.popcontent2_item1Icon = false
			},
			pop2item2Enter() {
				// console.log('鼠标进入') pop2 item2
				if (!this.popcontent2_item2Icon) {
					this.popcontent2_item2Icon = true
				}
			},
			pop2item2Leave() {
				// console.log('鼠标离开') pop2 item2
				this.popcontent2_item2Icon = false
			},
			pop2item3Enter() {
				// console.log('鼠标进入') pop2 item3
				if (!this.popcontent2_item3Icon) {
					this.popcontent2_item3Icon = true
				}
			},
			pop2item3Leave() {
				// console.log('鼠标离开') pop2 item3
				this.popcontent2_item3Icon = false
			},
			pop2item4Enter() {
				// console.log('鼠标进入') pop2 item3
				if (!this.popcontent2_item4Icon) {
					this.popcontent2_item4Icon = true
				}
			},
			pop2item4Leave() {
				// console.log('鼠标离开') pop2 item3
				this.popcontent2_item4Icon = false
			},
			//返回新闻列表
			backNewsList() {
				let that = this;
				that.newType = 1
			},
			//点击新闻
			selectNews(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.newType = 2
				that.newsTitle = that.newsList[index].title
				that.newsContent = that.newsList[index].content
				that.newsPic = that.newsList[index].pic
				consoleUtils.log(that.newsContent)
			},
			getInfo() {
				let that = this;

				let url = constantUtil.getNewsList
				let param = {

				}

				networkUtil.postRequestLoading2(
					url,
					param,
					constantUtil.loadingTitle,
					function(res) {
						if (res.code == 0) {

							that.newsList = res.data.list


						} else {

							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					},
					function(res) {

					}
				);
			},
		}
	}
</script>

<style>
	@import url("@/components/u-parse/u-parse.css");
	
	.aicontent {
		/* width: 1780rpx; */
		width: 100%;
		height: 100vh;
		/* margin-left: 100rpx;
		padding-right: 100rpx; */
		/* font-size: 23rpx; */
		font-size: 24rpx;
		color: #383838;
		line-height: 50rpx;
	}

	.aicontent img {
		max-width: 178rpx
	}

	page {
		background: #FFFAED
	}

	.mlr_25 {
		margin-left: 25rpx;
		margin-right: 25rpx;
	}

	.pagebg {
		background: #FFFAED
			/* background: linear-gradient(180deg, rgba(255, 251, 248, 0.4) 0%, rgba(242, 231, 227, 0.4) 100%), linear-gradient(182.3deg, rgba(255, 252, 247, 1) 0%, rgba(255, 250, 237, 1) 100%); */
	}

	.content2 {
		flex: 1;
		width: 100%;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.aboutusview {
		display: flex;
		flex-direction: column;
	}

	.vh100 {
		height: 100vh;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.1);
		display: flex;
		/* justify-content: center;
		align-items: center; */
		z-index: 999;
	}

	.popcontent1 {
		width: 610rpx;
		height: 325rpx;
		position: absolute;
		top: 100rpx;
		right: 370rpx;
		/* background-color: #629AF7; */
	}

	.popbg1 {
		width: 610rpx;
		height: 325rpx;
		position: absolute;
	}

	.pop1icon {
		width: 15rpx;
		height: 15rpx;
		min-width: 15rpx;
		min-height: 15rpx;
		background-color: #FAE79B;
		border-radius: 50rpx;
		position: absolute;
		left: 70rpx;
		top: 12rpx;
	}

	.popcontent1_item1view {
		margin-left: 57rpx;
		margin-top: 43rpx;
		position: relative;
	}

	.popcontent1_item1 {
		width: 298rpx;
		height: 72rpx;

	}

	.popcontent1_item2view {
		margin-left: 57rpx;
		margin-top: 26rpx;
		position: relative;
	}

	.popcontent1_item2 {
		width: 280rpx;
		height: 72rpx;

	}

	.pop1icon2 {
		width: 15rpx;
		height: 15rpx;
		min-width: 15rpx;
		min-height: 15rpx;
		background-color: #FAE79B;
		border-radius: 50rpx;
		position: absolute;
		left: 120rpx;
		top: 12rpx;
	}

	.popcontent2 {
		width: 803rpx;
		height: 312rpx;
		position: absolute;
		top: 100rpx;
		right: 370rpx;
		/* background-color: #629AF7; */
	}

	.popbg2 {
		width: 803rpx;
		height: 312rpx;
		position: absolute;
	}

	.popcontent2_item1 {
		width: 280rpx;
		height: 72rpx;
		margin-left: 57rpx;
		margin-top: 60rpx;
	}

	.pop2icon1 {
		width: 15rpx;
		height: 15rpx;
		min-width: 15rpx;
		min-height: 15rpx;
		background-color: #629AF7;
		border-radius: 50rpx;
		position: absolute;
		left: 180rpx;
		top: 70rpx;
	}

	.popcontent2_item2 {
		width: 140rpx;
		height: 72rpx;
		margin-left: 167rpx;
		margin-top: 60rpx;
	}

	.pop2icon2 {
		width: 15rpx;
		height: 15rpx;
		min-width: 15rpx;
		min-height: 15rpx;
		background-color: #629AF7;
		border-radius: 50rpx;
		position: absolute;
		right: 160rpx;
		top: 70rpx;
	}

	.popcontent2_item3 {
		width: 298rpx;
		height: 72rpx;
		margin-left: 57rpx;
		margin-top: 26rpx;
	}

	.pop2icon3 {
		width: 15rpx;
		height: 15rpx;
		min-width: 15rpx;
		min-height: 15rpx;
		background-color: #629AF7;
		border-radius: 50rpx;
		position: absolute;
		left: 235rpx;
		top: 36rpx;
	}

	.popcontent2_item4 {
		width: 210rpx;
		height: 72rpx;
		margin-left: 151rpx;
		margin-top: 26rpx;
	}

	.pop2icon4 {
		width: 15rpx;
		height: 15rpx;
		min-width: 15rpx;
		min-height: 15rpx;
		background-color: #629AF7;
		border-radius: 50rpx;
		position: absolute;
		right: 160rpx;
		top: 36rpx;
	}

	.white_font {
		color: #fff;
	}

	.black_000 {
		color: #000;
	}

	.vwid2133 {
		width: 2133rpx;
	}

	.ml_125 {
		margin-left: 125rpx;
	}

	.mr_125 {
		margin-right: 125rpx;
	}

	.mt_98 {
		margin-top: 98rpx;
	}

	.mt_58 {
		margin-top: 58rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		/* 		align-items: center;
		justify-content: center; */
	}

	.pagetopview {
		height: 94rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background-color: #FFFAED;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.pagetopview2 {
		height: 94rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		background-color: #383838;
		border-bottom: 1rpx solid #383838;
	}

	.pagetopview3 {
		height: 95rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.webtoplogo {
		width: 205rpx;
		height: 36rpx;
		margin-left: 183rpx;
	}

	.topview1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 90rpx;
		margin-right: 70rpx;
	}

	.topview2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 90rpx;
		margin-right: 115rpx;
	}

	.topview3 {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 90rpx;
		margin-right: 156rpx;
	}

	.topview2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 90rpx;
		margin-right: 115rpx;
	}

	.home_title2 {
		font-weight: 600;
		font-size: 26rpx;
		line-height: 34rpx;
		margin-top: 30rpx;
	}

	.topline {
		width: 156rpx;
		height: 7rpx;
		margin-top: 10rpx;
		border-radius: 3px;
		background: #FAE79B;
	}

	.topline2 {
		width: 104rpx;
		height: 7rpx;
		margin-top: 10rpx;
		border-radius: 3px;
		background: #629AF7;
	}

	.jumphome {
		width: 162rpx;
		height: 53rpx;
		margin-top: 20rpx;
	}

	.toplogo2 {
		width: 552rpx;
		height: 74rpx;
		/* margin-left: 168rpx; */
		margin-top: 78rpx;
	}

	.theorytitle {
		width: 487rpx;
		height: 95rpx;
	}

	.theoryimg1 {
		width: 1093rpx;
		height: 256rpx;
	}

	.theoryimg3 {
		width: 1093rpx;
		height: 187rpx;
	}

	.theoryimg {
		width: 790rpx;
		height: 806rpx;
	}

	.theoryimg4 {
		width: 2042rpx;
		height: 296rpx;
		margin-top: 145rpx;
	}

	.theorybg {
		width: 716rpx;
		height: 533rpx;
		position: fixed;
		right: 11%;
		top: 52%
	}

	.theoryline {
		width: 2123rpx;
		height: 105rpx;
	}

	.readtitle {
		width: 616rpx;
		height: 95rpx;
	}

	.readimg {
		width: 642rpx;
		height: 590rpx;
		margin-top: 83rpx;
		margin-left: 65rpx;
	}

	.readtitle2 {
		width: 386rpx;
		height: 88rpx;

	}

	.readimg2 {
		width: 930rpx;
		height: 527rpx;
		margin-top: 78rpx;
	}

	.techtitle {
		width: 380rpx;
		height: 95rpx;
		margin-left: 31rpx;
	}

	.techimg {
		width: 1240rpx;
		height: 585rpx;
		margin-top: 57rpx;
	}

	.techimg2 {
		width: 1210rpx;
		height: 455rpx;
		margin-top: 58rpx;
	}

	.techimg3 {
		width: 1218rpx;
		height: 598rpx;
		margin-top: 53rpx;
	}

	.aiitle {
		width: 380rpx;
		height: 95rpx;
		margin-left: 31rpx;
	}

	.aiimg {
		width: 1684rpx;
		height: 1260rpx;
		margin-top: 70rpx;
	}

	.elevateitle {
		width: 380rpx;
		height: 95rpx;
		margin-left: 31rpx;
	}

	.elevateimg {
		width: 1284rpx;
		height: 815rpx;
		margin-top: 70px;
	}

	.cotacttopimg {
		width: 100%;
		height: auto;
	}

	.cotacttopview {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 510rpx;
		position: relative;
		align-items: center;
		justify-content: center;
		background-color: #2C2C2C;
	}

	.aboutustopimg {
		width: 396rpx;
		height: 396rpx;
	}

	.aboutustop_leftimg {
		width: 266rpx;
		height: 254rpx;
		position: absolute;
		left: 0rpx;
		bottom: 0rpx;
	}

	.aboutustop_rightimg {
		width: 235rpx;
		height: 225rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}

	.aboutusimg1 {
		width: 100%;
		height: auto;
	}

	.item4 {
		width: 100%;
		height: auto;
		/* position: relative; */
	}

	.item5 {
		width: 100%;
		height: auto;
		/* position: relative; */
	}

	.item6 {
		width: 100%;
		height: auto;
		/* position: relative; */
	}

	.item7 {
		width: 100%;
		height: 10rpx;
		/* background-color: #2C2C2C; */
		/* position: relative; */
	}

	.cotactusimg {
		width: 605rpx;
		height: 132rpx;
	}

	.cotactusimg2 {
		width: 534rpx;
		height: 280rpx;
	}

	.aboutustv {
		font-size: 31rpx;
		font-weight: 700;
		line-height: 41rpx;
		color: rgba(101, 157, 247, 1);
		position: absolute;
		bottom: 57rpx;
		right: 156rpx;
	}

	.infobg {
		background: linear-gradient(220.56deg, rgba(98, 154, 247, 0.1) 0%, rgba(98, 154, 247, 0.05) 49.32%, rgba(98, 154, 247, 0) 100%);
	}

	.newsitem {
		width: 658rpx;
		height: 860rpx;
		border-radius: 10rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 16px rgba(37, 101, 120, 0.12);
	}

	.newsimg {
		width: 658rpx;
		height: 455rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.newstitle {
		font-size: 39rpx;
		font-weight: 600;
		line-height: 50rpx;
		color: rgba(0, 0, 0, 1);
		margin-top: 57rpx;
		margin-left: 44rpx;
		margin-right: 44rpx;
	}

	/* 悬停触发 */
	.newsitem:hover .newstitle {
		color: rgba(101, 157, 247, 1);
	}

	.newsdesc {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		color: rgba(166, 166, 166, 1);
		margin-top: 50rpx;
		margin-left: 44rpx;
		margin-right: 44rpx;
	}
</style>